<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web蓝牙设备管理器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .device-card {
                @apply bg-white rounded-lg shadow-md p-4 mb-3 hover:shadow-lg transition-shadow border-l-4 border-primary;
            }
            .scan-btn {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50;
            }
            .connect-btn {
                @apply bg-secondary hover:bg-secondary/90 text-white text-sm py-1 px-3 rounded transition-all;
            }
            .status-indicator {
                @apply w-2 h-2 rounded-full inline-block mr-2;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <header class="text-center mb-10">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2">
                <i class="fa fa-bluetooth-b text-primary mr-2"></i>Web蓝牙设备管理器
            </h1>
            <p class="text-gray-600">扫描并连接附近的蓝牙设备，无需安装额外应用</p>
            
            <div id="browser-alert" class="hidden mt-4 p-3 bg-yellow-100 text-yellow-800 rounded-lg text-sm">
                <i class="fa fa-exclamation-triangle mr-1"></i>
                <span>检测到不兼容的浏览器，Web蓝牙功能需要Chrome、Edge等现代浏览器</span>
            </div>
        </header>
        
        <main>
            <!-- 控制区域 -->
            <div class="text-center mb-8">
                <button id="scan-btn" class="scan-btn">
                    <i class="fa fa-search mr-2"></i>开始蓝牙扫描
                </button>
                <p id="status-text" class="mt-4 text-gray-600">请点击按钮开始扫描蓝牙设备</p>
            </div>
            
            <!-- 设备列表 -->
            <div id="devices-container" class="bg-white rounded-xl shadow-sm p-6 mb-8">
                <h2 class="text-xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-list-ul text-primary mr-2"></i>
                    发现的设备
                    <span id="device-count" class="ml-2 bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">0</span>
                </h2>
                
                <div id="devices-list" class="space-y-3">
                    <!-- 设备卡片将通过JavaScript动态添加 -->
                    <div class="text-gray-500 text-center py-8 border border-dashed border-gray-200 rounded-lg">
                        <i class="fa fa-bluetooth-b text-4xl mb-3 text-gray-300"></i>
                        <p>尚未发现蓝牙设备</p>
                        <p class="text-sm mt-1">请确保蓝牙已开启并点击扫描按钮</p>
                    </div>
                </div>
            </div>
            
            <!-- 连接的设备信息 -->
            <div id="connected-device" class="hidden bg-white rounded-xl shadow-sm p-6">
                <h2 class="text-xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-plug text-secondary mr-2"></i>
                    已连接设备
                </h2>
                
                <div id="device-info" class="space-y-4">
                    <!-- 设备信息将通过JavaScript动态添加 -->
                </div>
                
                <button id="disconnect-btn" class="mt-6 text-danger hover:text-danger/80 font-medium transition-colors">
                    <i class="fa fa-unplug mr-1"></i>断开连接
                </button>
            </div>
        </main>
        
        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>注意：此功能需要HTTPS环境和浏览器蓝牙权限支持</p>
            <p class="mt-1">支持设备：Chrome 56+、Edge 79+、Opera 43+</p>
        </footer>
    </div>

    <script src="app.js"></script>
</body>
</html>
